<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="page">
		<view v-if="current_product_batch_info.product_name&&current_product_batch_info.product_name.length >0">
			<view class="top_info">
					<view class="top_info_title">
						当前，{{current_product_batch_info.product_name}}<text @click="get_show()"
							class="iconfont icon-zhuanhuan"></text>
					</view>
					<view class="top_info_number">
						编号<text>{{current_product_batch_info.batch_number}}</text>
					</view>
					<view class="top_info_content">
						{{current_product_batch_info.batch_name}}<text class="iconfont icon-arrow-right"
							style="font-size: 20rpx;"></text>
					</view>
				
			</view>
			<template v-if="list.length > 0">
				<view class="list_top_title">
					历史进程
				</view>
				<view class="list_head">
					<view class="zong">
						<view class="user_box" style="width: 90%; margin:0 auto;">
							<view class="user_for" v-for="(item,index) in list" :key="index">
								<view class="line_box">
									<!-- 圆球 -->
									<!-- 	<view class="line_radio" :style="{ 'background' : list.istrue ? '#ef6f16' : '#8e8b8d' , 'border' : list.istrue ? 'solid 6rpx #fbc293' : 'solid 6rpx #b9b7b6'}"></view> -->
									<view class="line_radio"
										:style="{'border' : item.state == 1 ? 'solid 6rpx #F0250E' : 'solid 6rpx #F2F2F2'}">
									</view>
									<!-- 线 -->
									<view class="line_for" :style="{ 'background' : item.state == 1 ? '#F0250E' : '#F2F2F2'}">
									</view>
									<view class="line_radio" v-if="index == list.length -1"
										:style="{'border' : item.state == 1 ? 'solid 6rpx #F0250E' : 'solid 6rpx #F2F2F2'}">
									</view>
								</view>
				
								<view class="right_box" :style="{ 'color' : item.state == 1 ? '#262626' : '#C6C6C6'}">
									<view class="line_title">
										<view @click="Jump(item)">
											{{item.process_name}}>
										</view>
										<view v-if="item.state == 0">
											未进行
										</view>
										<view v-else>
											已完成
										</view>
									</view>
				
									<view class="desc" style="color: #C6C6C6">{{itme.updated_at}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			
		</view>
		<view v-else style="text-align: center;padding-top: 80px;color: #9b9b9b;">暂无历史溯源~</view>
		
		
		<!-- 弹窗 -->
		<view class="mode_head" v-if="show_type == true" @click="get_show()">
			<view class="mode_info_head" @click.stop="get_null()">
				<view class="mode_info_top">
					<view class="mode_info_title">
						选择产品
					</view>
					<view class="mode_info_msg" @click="get_show()">
						x
					</view>
				</view>
				<view class="scoll_head">
					<scroll-view :scroll-y="true" class="scoll_left" :show-scrollbar="false">
						<view :class="product_list_index == index?'left_items':'left_item'"
							v-for="(item,index) in product_list" :key="index" @click="picks(index)">
							{{item.product_name}}
						</view>
					</scroll-view>
					<scroll-view :scroll-y="true" class="scoll_right" :show-scrollbar="false">
						<view :class="product_batch_list_index == index?'right_items':'right_item'"
							v-for="(item,index) in product_list[product_list_index].product_batch_list" :key="index" @click="pick(item.id,index)">
							<view class="right_title">
								{{item.batch_name}}
							</view>
							<view class="right_msg" v-if="product_batch_list_index == index">
								√
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="mode_but_head">
				<view class="mode_but">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import source from "../../api/source/index.js";
	export default {
		data() {
			return {
				current_product_batch_info: {},
				product_list: [],
				list: [],
				show_type: false,
				product_batch_id: 0,
				product_list_index: 0,
				product_batch_list_index: 0
			}
		},
		created() {

		},
		onLoad(e) {
			if (e.product_batch_id) {
				this.product_batch_id = e.product_batch_id;
			}
			this.get_product_batch_process_log_history();
		},
		methods: {
			picks(index){
				this.product_list_index = index;
			},
			pick(id,index){
				this.product_batch_list_index = index;
				this.product_batch_id = id;
				this.get_product_batch_process_log_history();
				this.show_type = !this.show_type;
			},
			get_product_batch_process_log_history() {
				source.product_batch_process_log_history({
					product_batch_id: this.product_batch_id
				}).then((res) => {
					if (res.code == 0) {
						this.current_product_batch_info = res.data.current_product_batch_info;
						this.list = res.data.list;
						this.product_list = res.data.product_list;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			get_null() {},
			get_show() {
				this.show_type = !this.show_type
			}
		}
	}
</script>
<style scoped>
	.right_items {
		width: 90%;
		height: 96rpx;
		border-bottom: 1rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		color: #F0250E;
		font-size: 26rpx;
		font-weight: 600;
	}

	.right_item {
		width: 90%;
		height: 96rpx;
		border-bottom: 1rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		color: #262626;
		font-size: 26rpx;
		font-weight: 600;
	}

	.left_items {
		width: 100%;
		height: 96rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		color: #262626;
		background: #fff;
	}

	.left_item {
		width: 100%;
		height: 96rpx;
		line-height: 90rpx;
		margin-left: 30rpx;
	}

	.scoll_right {
		height: 700rpx;
		width: 70%;
	}

	.scoll_left {
		height: 700rpx;
		width: 30%;
		background: #F2F1F2;
		color: #8C8C8C;
		font-size: 26rpx;
	}

	.scoll_head {
		width: 100%;
		height: 700rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mode_info_top {
		width: 95%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		font-size: 32rpx;
		color: #262626;
		font-weight: 600;
	}

	.mode_info_head {
		width: 100%;
		height: 800rpx;
		background-color: #fff;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
	}

	.mode_but {
		width: 90%;
		height: 80rpx;
		background: #F0250E;
		border-radius: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.mode_but_head {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mode_head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgb(0, 0, 0, 0.4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	/* 弹窗 */
	.line_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: 600;
	}

	.user_for {
		display: flex;
		width: 100%;
	}

	.item_year {
		font-size: 34rpx;
		height: 50rpx;
	}

	.line_for {
		width: 4rpx;
		height: 130rpx;
		margin: 0 20rpx 0rpx;
		background-color: #559DFF;
	}

	.line_radio {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}

	.right_box {
		padding-left: 20rpx;
		width: 90%;
	}

	.descs {
		font-size: 24rpx;
		color: #8C8C8C;
		margin-top: 4rpx;
	}

	.desc {
		font-size: 24rpx;
		color: #8C8C8C;
		margin-top: 4rpx;
	}

	/* 时间轴 */
	.list_head {
		width: 95%;
		margin: 0 auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 48rpx 0;
	}

	.list_top_title {
		width: 95%;
		padding: 30rpx 0;
		margin: 0 auto;
		font-size: 30rpx;
		color: #262626;
		font-weight: 600;
	}

	/* 列表 */
	.top_info_content text {
		margin-left: 10rpx;
	}

	.top_info_content {
		font-size: 26rpx;
		color: #262626;
		margin-left: 30rpx;
		margin-top: 16rpx;
	}

	.top_info_number text {
		margin-left: 10rpx;
	}

	.top_info_number {
		font-size: 26rpx;
		color: #262626;
		margin-left: 30rpx;
		margin-top: 16rpx;
	}
	.top_info_title text{
		color: #000000;
		font-size: 28rpx;
		margin-left: 22rpx;
	}

	.top_info_title {
		font-size: 30rpx;
		color: #000000;
		font-weight: 600;
		margin-left: 30rpx;
	}

	.top_info {
		width: 100%;
		background: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 30rpx 0;
	}

	/* <!-- 分类 --> */
	.page {
		background: rgb(242, 242, 242);
		min-height: 100vh;
		width: 100%;
		padding-bottom: 100rpx;
	}
</style>
